<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.agencyId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="机构选择"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in options"
          :key="item.agencyId"
          :label="item.agencyName"
          :value="item.agencyId"
        />
      </el-select>
      <el-select
        v-model="listQuery.type"
        clearable
        placeholder="机构类型"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option value="CRM" label="广告">广告</el-option>
        <el-option value="API" label="保险">保险</el-option>
      </el-select>

      <el-input
        v-model="listQuery.trans"
        placeholder="曝光消耗"
        style="width: 150px;"
        class="filter-item"
        clearable
      />
      <el-select
        v-model="listQuery.symbol"
        clearable
        placeholder="消耗类型"
        style="width: 200px;"
        class="filter-item"
      >
        <el-option value="PLUS" label="增">增</el-option>
        <el-option value="SUB" label="减">减</el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="消耗开始时间"
        end-placeholder="消耗结束时间"
        style="width: 400px;"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilterDedail"
        :loading="listLoading"
      >
        搜索
      </el-button>
    </div>
    <el-table
      :key="detailtableKey"
      v-loading="listLoading"
      element-loading-text="加载中"
      :data="listDetail"
      border
      fit
      highlight-current-row
      style="width: 80%;"
    >
      <el-table-column label="机构ID" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.agencyId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" class-name="status-col" min-width="110">
        <template slot-scope="{ row }">
          {{ row.agencyName }}
        </template>
      </el-table-column>

      <el-table-column label="机构类型" width="150" align="center">
        <template slot-scope="{ row }">
          <span>{{ agencyIdText[row.accType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消耗类型" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.symbol == 'SUB' ? '减' : '增' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="曝光消耗" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.transCoin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消耗时间" align="center" width="200">
        <template slot-scope="{ row }">
          <span>{{ row.transTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="detailTotal > 0"
      :total="detailTotal"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getlistDetail"
    />
  </div>
</template>
<script>
import { getlistDetail, getAgency } from '@/api/account.js';
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination

export default {
  name: 'AccountDetail',
  components: { Pagination },
  data() {
    return {
      agencyIdText: {
        CRM: '广告',
        API: '保险'
      },
      // 明细
      listDetail: [],
      detailTotal: 0,
      detailtableKey: 0,
      listQuery: {
        size: 10,
        current: 1,
        startTime: '',
        endTime: '',
        type: '',
        agencyId: '',
        symbol: '',
        trans: ''
      },
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          (24 * 60 * 60 * 1000 - 1)
      ],
      times: null,
      viewProtocolialog: false,
      rules: {
        symbol: [{ required: true, message: '请选择类型', trigger: 'change' }],
        remark: [{ required: true, message: '请填写备注', trigger: 'change' }],
        coin: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      optionsCopy: [],
      options: [],
      listLoading: false,
      btnLoading: false
    };
  },
  created() {
    this.times = [
      this.timestampToTime(this.timeNow[0]),
      this.timestampToTime(this.timeNow[1])
    ];
    this.listQuery.endTime = this.times[1];
    this.listQuery.startTime = this.times[0];
    this.getlistDetail(this.listQuery);
    this.getAgency();
  },
  methods: {
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          if (
            !!~item.agencyName.indexOf(val) ||
            !!~item.agencyName.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':';
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    async getlistDetail() {
      this.listLoading = true;
      const res = await getlistDetail(this.listQuery);
      if (res.data.code === 200) {
        this.listDetail = res.data.data.records;
        this.detailTotal = res.data.data.total;
        this.listLoading = false;
      } else {
        this.listLoading = false;
      }
    },
    async getAgency() {
      const res = await getAgency();
      res.data.data.forEach(element => {
        if (element.agencyName !== null) {
          this.optionsCopy.push(element);
          this.options.push(element);
        }
      });
    },
    // 搜索
    handleFilter() {
      this.listQuery.current = 1;
      if (this.times) {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      } else {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      }
      this.getListAcc(this.listQuery);
    },
    // 搜索
    handleFilterDedail() {
      this.listQuery.current = 1;
      if (this.times) {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      } else {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      }
      this.getlistDetail(this.listQuery);
    }
  }
};
</script>
<style scoped></style>
